<template>
  <a-modal :title="isEdit ? '编辑' : '新增'" v-model:visible="visible" :width="600" @ok="handleOk" @cancel="handleCancel"
    :destroyOnClose="true">
    <a-form ref="formRef" :model="formData" :rules="rules" class="process-form">
      <!-- 流程类型 -->
      <a-form-item label="流程类型" name="processType" :label-col="{ span: 4 }" :wrapper-col="{ span: 7 }"
        style="padding-left:16px;">
        <a-select v-model:value="formData.processType" placeholder="请选择流程类型">
          <a-select-option value="PURCHASE_ORDER">采购订单</a-select-option>
          <a-select-option value="PURCHASE_RECEIVE">采购收货</a-select-option>
          <a-select-option value="PURCHASE_RETURN">采购退货</a-select-option>
          <a-select-option value="RETAIL_OUT">零售出库</a-select-option>
          <a-select-option value="RETAIL_RETURN">零售退货</a-select-option>
          <a-select-option value="SALE_ORDER">销售订单</a-select-option>
          <a-select-option value="SALE_OUT">销售出库</a-select-option>
          <a-select-option value="SALE_RETURN">销售退货</a-select-option>
          <a-select-option value="STOCK_ADJUST">库存调整</a-select-option>
          <a-select-option value="STOCK_TAKE">盘点单管理</a-select-option>
          <a-select-option value="STOCK_TRANSFER">仓库调拨</a-select-option>
          <a-select-option value="SUPPLIER_COST">供应商费用</a-select-option>
          <a-select-option value="SUPPLIER_PAYMENT">供应商预付款</a-select-option>
          <a-select-option value="SUPPLIER_RETURN">供应商对账</a-select-option>
          <a-select-option value="STOCK_TRANSFER">供应商结算</a-select-option>
          <a-select-option value="CUSTOMER_COST">客户费用</a-select-option>
          <a-select-option value="CUSTOMER_PAYMENT">客户预付款</a-select-option>
          <a-select-option value="CUSTOMER_RETURN">客户对账</a-select-option>
          <a-select-option value="CUSTOMER_SETTLEMENT">客户结算</a-select-option>
        </a-select>
      </a-form-item>

      <!-- 流程节点列表 -->
      <div class="node-list">
        <div v-for="(node, index) in nodes" :key="index" class="node-item">
          <div class="node-content">
            <!-- 流程节点 -->
            <a-form-item :label="`流程节点${index + 1}`" :name="`nodes[${index}].type`" class="node-type">
              <a-select v-model:value="node.type" placeholder="请选择流程节点"
                @change="(value) => handleNodeTypeChange(index, value)">
                <a-select-option value="DEPT">本部门审核</a-select-option>
                <a-select-option value="UPPER_DEPT">上级部门审核</a-select-option>
                <a-select-option value="OTHER_DEPT">其他部门审核</a-select-option>
                <a-select-option value="SPECIFIED">指定人审核</a-select-option>
              </a-select>
            </a-form-item>
            <!-- 审核人/部门选择 -->
            <div class="node-right">
              <a-form-item :name="`nodes[${index}].approvers`" label="审核人">
                <a-select v-model:value="node.approvers" mode="multiple" placeholder="请选择审核人" />
              </a-form-item>
            </div>
          </div>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { debounce } from 'lodash-es';

export default defineComponent({
  components: {
    PlusOutlined,
  },
  emits: ['success'],
  setup() {
    const visible = ref(false);
    const formData = ref<any>({});
    const formRef = ref({});
    const isEdit = ref(false);
    const nodes = ref<any[]>([
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
      { type: undefined, approvers: [], department: undefined },
    ]);

    // 表单验证规则
    const rules = {
      processType: [{ required: false, message: '请选择流程类型' }],
      processNode: [{ required: true, message: '请选择流程节点' }],
      auditor: [{ required: true, message: '请选择审核人', trigger: 'change' }],
      auditDept: [{ required: true, message: '请选择审核部门', trigger: 'change' }],
    };

    // 加载部门树
    const loadDeptTree = async () => {
      try {
        // const res = await deptApi.getTree();
        // deptOptions.value = res.data;
      } catch (error) {
        console.error('加载部门树失败:', error);
      }
    };

    // 打开新增
    const openAdd = () => {
      console.log('openAdd');
      isEdit.value = false;
      formData.value = {
        processType: undefined,
        processNode: undefined,
        auditor: undefined,
        auditDept: undefined,
      };
      loadDeptTree();
      visible.value = true;
    };

    // 确认
    const handleOk = async () => {
      try {
        await formRef.value.validate();
        // 调用保存API
        // await processApi.save(formData.value);
        message.success('保存成功');
        visible.value = false;
        emit('success');
      } catch (error) {
        console.error('保存失败:', error);
      }
    };

    // 取消
    const handleCancel = () => {
      visible.value = false;
      formData.value = {};
    };

    // 节点类型变化处理
    const handleNodeTypeChange = (index: number, value: string) => {
      const node = nodes.value[index];
      node.approvers = [];
      node.department = undefined;
    };

    return {
      visible,
      formData,
      formRef,
      rules,
      openAdd,
      handleOk,
      handleCancel,
      isEdit,
      nodes,
      handleNodeTypeChange,
    };
  },
});
</script>

<style lang="less" scoped>
.process-form {
  padding: 24px 16px;

  :deep(.ant-form-item) {
    margin-bottom: 0 !important;
  }

  .node-list {
    padding-top: 9px;

    .node-item {
      // margin-bottom: 24px;
      padding: 9px;
      // background: #f8f8f8;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      .node-content {
        display: flex;
        align-items: flex-start;
        gap: 24px;

        .node-type {
          flex: 1;
          margin-bottom: 0;

          :deep(.ant-form-item-label) {
            width: 100px;
          }
        }

        .node-right {
          flex: 1;

          :deep(.ant-form-item) {
            margin-bottom: 0;

            .ant-form-item-label {
              width: 80px;
            }
          }

          .node-text {
            line-height: 32px;
            color: #666;
          }
        }
      }
    }
  }

  :deep(.ant-form-item) {
    margin-bottom: 24px;
  }
}
</style>
